/**
 * TMP001新增
 * */


var formArys = {
    title: '',
    imgs: [],
    attrs: []
}; //表单对象


//新增表单
function formAdd(){
    if (!vid) {
        msgPop({msg: '没有视频ID'}); return
    }
    var h = '';
    //标签名称
    h += '<table>';
    h += '<tr>';
    h += '<td class="tl">标签名称</td>';
    h += '<td class="tr">';
    h += '<input type="text" id="title" placeholder="输入标签名称" onclick="inputClick(this);" onblur="titleBlur();"/>';
    h += '</td>';
    h += '</tr>';
    h += '</table>';
    //图片
    h += '<table id="tb-img">';
    h += '<tr>';
    h += '<td class="tl" style="vertical-align: top;">图片</td>';
    h += '<td class="tr">';
    h += '<div id="uploadOut" style="width: 100px; height: 25px; background: red; overflow: hidden;">';
    //h += '<div style="padding: 5px 0; width: 100px; background: #0088cc; text-align: center; font-size: 12px; color: #fff; position: relative;">上传图片</div>';
    //h += '<input type="file" id="uploadFile" style="width: 105px; height: 25px; opacity: 0; position: relative; top: -26px;" onchange="uploadImage()"/>';
    h += uploadHtml();
    h += '</div>';
    h += '<div id="imgs" style="margin-top: 5px; max-width: 150px; max-height: 400px; overflow: auto;"></div>';
    h += '</td>';
    h += '</tr>';
    h += '</table>';
    //自定义属性
    h += '<table id="tb-attr">';
    h += '<tr>';
    h += '<td class="tl">';
    h += '<input type="text" placeholder="点击设置" onclick="keyPop();"/>';
    h += '</td>';
    h += '<td class="tr">';
    h += '<input type="text" placeholder="输入自定义名称" onclick="msgPop({msg: \'先设置左侧属性名\'});" readonly/>';
    h += '</td>';
    h += '</tr>';
    h += '</table>';
    //按钮
    h += '<div id="tb-btn" onclick="formSave();">保存</div>';
    $('#form').html(h);
}


//点击激活
function inputClick(e){
    $('#' + e.id).addClass('click');
}


//失去激活
function titleBlur(){
    var title = $('#title');
    var val = title.val();
    title.removeClass('click');
    if (val != '') {
        formArys.title = val;
    }
    console.log(formArys);
}


//上传HTML
function uploadHtml(){
    var h = '';
    h += '<div style="padding: 5px 0; width: 100px; background: #0088cc; text-align: center; font-size: 12px; color: #fff; position: relative;">上传图片</div>';
    h += '<input type="file" id="uploadFile" style="width: 105px; height: 25px; opacity: 0; position: relative; top: -26px;" onchange="uploadImage()"/>';
    return h;
}


//图片HTML
function imgHtml(){
    var h = '';
    for (var i = 0; i < formArys.imgs.length; i ++) {
        h += '<div style="margin-bottom: 5px; width: 150px; height: 100px; overflow: hidden;">';
        h += '<img src="' + formArys.imgs[i] + '" style="width: 150px;"/>';
        h += '<a href="javascript:;" style="padding: 5px 10px; color: #fff; background: red; font-size: 12px; border: 0; border-radius: 0; opacity: 0.7; position: relative; top: -110px; left: 80px;" onclick="imgDel(' + i + ');">点击删除</a>';
        h += '</div>';
    }
    return h;
}


//显示图片
function showImg(e){
    if (formArys.imgs.length >= 9) {
        msgPop({msg: '最多上传9个图'}); return
    }
    formArys.imgs.push(e);
    //console.log(formArys.imgs);
    $('#imgs').html(imgHtml());
    $('#uploadOut').html(uploadHtml());
}


//删除图片
function imgDel(v){
    var newImgs = [];
    for (var i = 0; i < formArys.imgs.length; i ++) {
        if (i != v) {
            newImgs.push(formArys.imgs[i]);
        }
    }
    formArys.imgs = newImgs;
    $('#imgs').html(imgHtml());
}


////失去激活
//function inputBlur(e){
//    $('#' + e.id).removeClass('click');
//    var field = e.id, val = e.value;
//    console.log(field, val);
//    if (val != '') {
//        switch (field) {
//            case 'title':
//                formArys.title = val;
//                break;
//            //case 'uploadFile':
//            //    formArys.imgs.push(val);
//            //    break;
//            case 'attrs':
//                formArys.title = e.value;
//                break;
//            default:
//                break;
//        }
//    }
//}


//属性名弹窗
function keyPop(){
    var h = '';
    h += '<div style="position: fixed; top: 35px; z-index: 100;">';
    h += '<div style="width: '+cw+'px; height: ' + (ch - 35) + 'px; background: #000; opacity: 0.5; position: fixed; top: 35px; z-index: 100;"></div>';
    h += '<div style="margin-top: ' + (ch * 0.1) + 'px; margin-left: ' + (cw * 0.1) + 'px; padding: 10px; width: ' + (cw * 0.8 - 20) + 'px; background: #fff; border-radius: 5px; position: fixed; top: 20%; z-index: 100;">';
    h += '<div style="margin: 10px 0; text-align: center; font-size: 12px; color: #888;">新增属性<div/>';
    h += '<div style="margin-top: 10px; font-size: 12px;"><input type="text" id="attrName" placeholder="输入名称" style="width: 90%; padding: 5px 5%; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; outline-color: #0088cc;"/><div/>';
    h += '<div style="margin: 10px 0;"><button style="padding: 5px 0; width: 49%; border: 0; border-radius: 3px; background: coral; color: #fff;" onclick="$(\'#keyPop\').html(\'\');">取消</button> <button style="padding: 5px 0; width: 49%; border: 0; border-radius: 3px; background: #0088cc; color: #fff;" onclick="setKey();">保存</button></div>';
    h += '</div>';
    h += '</div>';
    $('#keyPop').html(h);
}


//暂存属性key
function setKey(){
    var currName = $('#attrName').val();
    if (currName == '') {
        msgPop({msg: '属性名不能空'});
    }
    formArys.attrs.push({attrName: currName, attrVal: ''});
    getAttrHtml();
    $('#keyPop').html('');
    console.log(formArys);
}


//删除指定属性
function delKey(key){
    if (formArys.attrs.length == 0) {
        msgPop({msg: '没有属性'});
        return
    }
    var attrArys = [];
    for (var i = 0; i < formArys.attrs.length; i++) {
        if (i != key) {
            attrArys.push(formArys.attrs[i]);
        }
    }
    formArys.attrs = attrArys;
    getAttrHtml();
    console.log(formArys);
}


//设置属性值
function attrBlur(k){
    var ele = $('#val-' + k);
    var val = ele.val();
    if (val == '') {
        msgPop({msg: '没有属性值'});
        return
    }
    if (formArys.attrs[k] == undefined) {
        msgPop({msg: '没有该属性'});
        return
    }
    formArys.attrs[k].attrVal = val;
    ele.removeClass('click');
    getAttrHtml();
    console.log(formArys);
}


//属性字符串拼接
function getAttrHtml(){
    var h = '', i, attrName, attrVal;
    for (i = 0; i < formArys.attrs.length; i++) {
        attrName = formArys.attrs[i].attrName;
        attrVal = formArys.attrs[i].attrVal;
        h += '<tr>';
        h += '<td class="tl">';
        h += attrName;
        h += '</td>';
        h += '<td class="tr">';
        h += '<input type="text" id="val-' + i + '" placeholder="输入自定义名称" value="' + attrVal + '" onclick="inputClick(this);" onblur="attrBlur(' + i + ');"/>';
        h += '<a href="javascript:;" onclick="delKey(' + i + ');">-</a>';
        h += '</td>';
        h += '</tr>';
    }
    h += '<tr>';
    h += '<td class="tl">';
    h += '<input type="text" placeholder="点击设置" onclick="keyPop();"/>';
    h += '</td>';
    h += '<td class="tr">';
    h += '<input type="text" placeholder="输入自定义名称" onclick="msgPop({msg: \'先设置左侧属性名\'});"/>';
    h += '</td>';
    h += '</tr>';
    $('#tb-attr').html(h);
}


//保存表单
function formSave(){
    if (formArys.title == '' && formArys.imgs.length == 0 && formArys.attrs.length == 0) {
        msgPop({msg: '没有提交数据'}); return
    }
    var formData = formArys;
    formData.code = code;
    formData.token = token;
    formData.videoId = vid;
    $.ajax({
        type: apis.tmp1Add.method,
        url: apis.tmp1Add.url,
        data: formArys,
        success: function (res) {
            console.log(res);
            if (res.code != 0) {
                msgPop({msg: res.msg});
                return
            }
            window.location.href = routes.tmp1Index + '?code=' + code + '&token=' + token;
        },
        error: function () {
            console.log('网络错误');
        }
    });
}